<template>
  <div class="page-content">
    <el-row>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="模块名称">
            <el-input v-model="query.role" placeholder="模块名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getList">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="success" @click="handleEdit()">修改</el-button>
            <el-button type="warning" @click="handleRemove()">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;" row-key="code" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelection">
<!--      <el-table-column type="selection" width="55" />-->
<!--      <el-table-column prop="code" label="code" width="180" />-->
<!--      <el-table-column prop="sort" label="编号"/>-->
<!--      <el-table-column prop="remark" label="备注"/>-->
<!--      <el-table-column label="操作" align="center">-->
<!--        <template #default="scope">-->
<!--          <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--          <el-button link type="primary" @click="handleRemove(scope.row)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template #default="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.status" type="success">
            正常
          </el-tag>
          <el-tag v-if="!scope.row.status" type="danger">
            停用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-tooltip content="修改" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)" v-hasPermi="['system:menu:edit']" />
          </el-tooltip>
          <el-tooltip content="新增" placement="top">
            <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link type="primary" icon="Delete" @click="handleRemove(scope.row)" v-hasPermi="['system:menu:remove']" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-model:size="query.pageSize" v-model:page="query.pageNum" :total="total" @pagination="getList" />
  <dwin ref="dialog" :width="600" :url="'/view/module/edit.vue'" :title="'新增/编辑数据源'" @onclose="handleClose"></dwin>
  </div>
</template>
<script>
import Dwin from "../../component/dwin.vue";
import Pagination from "../../component/pagination.vue";
import svgIcon from '/component/svgicon.vue';
import {treeList,remove} from '/http/module.js'
const {ElMessage,ElMessageBox} = ElementPlus;
export default {
  components: {Dwin,Pagination,svgIcon},
  setup() {
    const tableData = ref([]);
    const total = ref(1);
    const dialog = ref(null);
    const selectRows = ref([])
    const model = {
      name:'',
      pageSize:20,
      pageNum:1,
      orderByColumn:'sort'
    }
    const query = reactive(Object.assign({},model))
    //const query = toRefs(react);
    const resetForm =()=>{
      Object.assign(query, model);
    }
    const getList=()=>{
      treeList(query).then(res=>{
        tableData.value = res.data;
      })
    }
    const handleSelection = (val) => {
      selectRows.value = val
    }
    const handleAdd = (row) => {
      const data = row&&row.code?{pid:row.code,type:'M'}:{pid:'root',type:'M'}
      dialog.value.open({action:'add',row:data});
    }

    const handleEdit = (row) => {
      console.log(row)
      let rows = row==null?selectRows:ref([row]);
      beforeEdit(rows,()=>{
        dialog.value.open({action:'edit',row:rows.value[0]});
      })
    }

    const handleRemove = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeRemove(rows,()=>{
        remove(rows.value.map((item) => item.code)).then(res=>{
          if(response(res)){
            getList();
          }
        })
      });
    }

    const handleClose = (refresh)=>{
      if(refresh){
        getList();
      }
    }

    const handleTest = ()=>{
    }

    getList();
    return {handleAdd,
      handleEdit,
      handleRemove,
      dialog,
      tableData,
      query,
      getList,
      resetForm,
      handleSelection,
      handleClose,
      total};
  }
}
</script>
<style scoped>

</style>